<template>
  <view class="content-box">
    <view class="totalElectricity-left">
      <image src="/static/dashboard/totalElectricity-bg.png" mode="" />
      <view class="title">
        {{ $t("dashboard.totalNumberOfPowerStations") }}
        <!-- 总电站数 -->
      </view>
      <view class="num">
        {{ showNumber(dataPage.totalStation) }}
      </view>
    </view>
    <view class="totalElectricity-right">
      <view class="totalElectricity-right-item" style="margin-bottom: 50rpx">
        <text class="title">
          {{ $t("dashboard.numberOfRunningSites") }}
          <!-- 运行站点数 -->
        </text>
        <text class="num">
          {{ showNumber(dataPage.runStation) }}
        </text>
      </view>
      <view class="totalElectricity-right-item">
        <text class="title">
          {{ $t("dashboard.numberOfIdleSites") }}
          <!-- 空闲站点数 -->
        </text>
        <text class="num">
          {{ showNumber(dataPage.freeStation) }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataPage: {},
  },
  data() {
    return {};
  },
  computed: {},
  onLoad() { },
  methods: {
    showNumber(number) {
      return number ? number : 0;
    },
  },
};
</script>

<style lang="scss">
.content-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #132034;
  border-radius: 10rpx;
  padding: 32rpx;
  box-sizing: border-box;

  .totalElectricity-left {
    width: 230rpx;
    background-color: #58a2d9;
    border-radius: 10rpx;
    padding: 30rpx 24rpx;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    .title {
      font-family: PingFang SC Bold;
      font-size: 28rpx;
      color: #ffffff;
      margin-bottom: 27rpx;
    }

    .num {
      font-family: D-DIN;
      font-size: 56rpx;
      font-weight: bold;
      color: #ffffff;
    }

    image {
      width: 103rpx;
      height: 162rpx;
      position: absolute;
      right: -10rpx;
      bottom: -50rpx;
    }
  }

  .totalElectricity-right {
    flex: 1;
    margin-left: 74rpx;

    .totalElectricity-right-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-family: PingFang SC Regular;
        font-size: 28rpx;
        font-weight: normal;
        color: #ffffff;
      }

      .num {
        margin-left: 16rpx;
        font-family: D-DIN;
        font-size: 40rpx;
        letter-spacing: 0em;
        color: #ffffff;
      }
    }
  }
}
</style>
